
<template>
  <div class="container">
    <div class="app-container">
      <el-row :gutter="20">
        <!-- 机构概述 -->
        <el-col :span="14">
          <el-card class="institution">
            <p>机构概述</p>

            <div class="content">
              <div class="left-content">
                <div class="name">西三旗分拣中心</div>
                <div class="address">地址：北京顺义区天澜综合保税区123号</div>
                <div class="duty-people">负责人：赵五金 16712345678</div>
                <el-button type="primary" class="search-sales-department">查看营业部分布</el-button>
              </div>
              <div class="right-content">
                <div class="item">
                  <div>
                    <div class="label">分拣中心(个)</div>
                    <div class="num">1</div>
                  </div>
                </div>
                <div class="item">
                  <div>
                    <div class="label">营业部(个)</div>
                    <div class="num">4</div>
                  </div>
                </div>
                <div class="item">
                  <div>
                    <div class="label">司机人数(个)</div>
                    <div class="num">48</div>
                  </div>
                </div>
                <div class="item"><div><div class="label">快递员人数(个)</div>
                  <div class="num">64</div>
                </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <!-- 今日数据 -->
        <el-col :span="10">
          <el-card class="right-info">
            <div class="header">
              <p>今日数据</p>
              <div class="refresh-box">
                2023-05-18 22:34
              </div>
            </div>
            <el-row span="24" class="row-bg">
              <el-col>
                <div class="label">订单金额(元)</div>
                <div id="my-number1" class="value">2,284</div>
                <div class="bottom">较昨日 +342</div>
              </el-col>
              <el-col>
                <div class="label">订单数量(笔)</div>
                <div id="my-number2" class="value">193</div>
                <div class="bottom">较昨日 +27</div>
              </el-col>
              <el-col>
                <div class="label">运输任务(次)</div>
                <div id="my-number3" class="value">38</div>
                <div class="bottom">较昨日 +26</div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <data-ball>
          <!-- 待办任务 -->
        </data-ball>

        <el-col :span="14">
          <el-card />
        </el-col>
        <!-- 执行中任务 -->
        <el-col :span="10">
          <el-card />
        </el-col>
      </el-row>
      <el-row>
        <!-- 常用功能 -->
        <el-col>
          <el-card />
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <!-- 线路管理  -->
        <el-col :span="12">
          <el-card />
        </el-col>
        <!-- 运输任务 -->
        <el-col :span="12">
          <el-card />
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <!-- 订单总量 -->
        <el-col :span="12">
          <el-card />
        </el-col>
        <!-- 订单分布 -->
        <el-col :span="12">
          <el-card />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import dataBall from './components/dataBall.vue'

export default {
  name: 'Dashboard',
  components: { dataBall },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
p {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 16px;
}
// 机构概述
.institution {
  .content {
    position: relative;
    display: flex;
    .left-content {
      padding-left: 10px;
      flex: 50%;
      border-right: 1px solid #ebeef5;
      .name {
        font-size: 16px;
        margin-top: 20px;
        margin-bottom: 13px;
      }
      .address {
        font-size: 14px;
        color: #818693;
        margin-bottom: 8px;
      }
      .duty-people {
        font-size: 14px;
        color: #818693;
        margin-bottom: 23px;
      }
      .search-sales-department {
        font-size: 14px;
        color: #e15536;
        width: 158px;
        height: 40px;
        background: #ffeeeb;
        border: 1px solid #f3917c;
        border-radius: 4px;
        cursor: pointer;
        &:hover {
          background-color: #ff6b4a;
          color: #fff;
        }
      }
    }
    .right-content {
      display: flex;
      flex: 50%;
      width: 300px;
      flex-wrap: wrap;
      // align-items: center;
      justify-content: center;
      .item {
        flex: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .label {
          font-size: 14px;
          margin-bottom: 10px;
        }
        .num {
          font-size: 32px;
          font-weight: 700;
          color: #e15536;
          cursor: pointer;
        }
        &:nth-child(2) {
          padding-right: 25px;
        }
      }
    }
  }
}
// 今日数据
.right-info {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .refresh-box {
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 14px;
      color: #818693;
      &::before {
        content: "";
        width: 15px;
        height: 14px;
        margin-right: 8px;
        background: url(~@/assets/img/home/layoutjiazaiicon.png) no-repeat;
        background-size: contain;
      }
    }
  }
  .row-bg {
    display: flex;
    justify-content: space-around;
    margin-top: 16px;
    padding-left: 10px;
    text-align: center;
    .label {
      margin-bottom: 21px;
      font-size: 14px;
      color: #20232a;
    }
    .value {
      margin-bottom: 24px;
      font-size: 36px;
      color: #20232a;
      font-weight: 700;
    }
    .bottom {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
      padding-left: 9px;
      font-size: 14px;
      color: #818693;
      &::after {
        content: "";
        width: 15px;
        height: 15px;
        background: url(~@/assets/img/home/layoutjiantoicon.png) no-repeat;
        background-size: contain;
      }
    }
  }
}

</style>
